<template>
	<h2>shallowReactive 与 shallowRef</h2>
	<h3>m1:{{ m1 }}</h3>
	<h3>m2:{{ m2 }}</h3>
	<h3>m3:{{ m3 }}</h3>
	<h3>m4:{{ m4 }}</h3>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, shallowReactive, shallowRef } from "vue"

export default defineComponent({
	name: "App",
	setup() {
		// shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)

		// shallowRef: 只处理了value的响应式, 不进行对象的reactive处理

		const m1 = reactive({
			name: "佐助",
			age: 20,
			car: {
				name: "奔驰",
				color: "green"
			}
		})
		const m2 = shallowReactive({
			name: "佐助",
			age: 20,
			car: {
				name: "奔驰",
				color: "green"
			}
		})
		const m3 = ref({
			name: "佐助",
			age: 20,
			car: {
				name: "奔驰",
				color: "green"
			}
		})
		const m4 = shallowRef({
			name: "佐助",
			age: 20,
			car: {
				name: "奔驰",
				color: "green"
			}
		})

		return {
			m1,
			m2,
			m3,
			m4
		}
	}
})
</script>

<style></style>
